
<template>
      <el-form :data="userData" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <td>
          <el-form-item label="账号" prop="lName">
              <el-input v-model="ruleForm.lName" readonly>{{ruleForm.lName}}</el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="姓名" prop="rName" >
              <el-input v-model="ruleForm.rName" :readonly="textVisible" >{{ruleForm.rName}}</el-input>
          </el-form-item>
        </td>
        <dr/>
        <td>
          <el-form-item label="手机号" prop="tel" >
              <el-input v-model="ruleForm.tel" :readonly="textVisible" >{{ruleForm.tel}}</el-input>
          </el-form-item>
        </td>
         <td>
          <el-form-item label="邮箱" prop="email" >
              <el-input v-model="ruleForm.email" :readonly="textVisible" >{{ruleForm.email}}</el-input>
          </el-form-item>
        </td>
        <dr/>
         <td>
          <el-form-item label="角色" prop="code">
              <el-input v-model="ruleForm.code" readonly>{{ruleForm.code}}</el-input>
          </el-form-item>
        </td>
         <td>
          <el-form-item label="状态" prop="status">
              <el-input v-model="ruleForm.status" readonly>{{ruleForm.status}}</el-input>
          </el-form-item>
        </td>
        <dr/>       
        <el-row class="row">
          <el-button round @click="textVisible=false">编辑</el-button>
          <el-button round @click="updateUser">保存</el-button>
        </el-row>
      </el-form>
</template>
<script>
  export default {
    data() {
      return {
        textVisible:true,
        ruleForm: {
          lName: '',
          rName: '',
          tel: '',
          email: '',
          code:'',
          status:''
        },
        rules: {
          lName: [
            { required: true, message: '请输入账号', trigger: 'blur' },
          ],
          rName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          tel: [
            { required: true, message: '请输入手机号码', trigger: 'blur' }
          ],
          email:  [
            { required: true, message: '请输入邮箱', trigger: 'change' }
          ],
        },
        created:function(){
          this.$axios
          .get('users')
          .then(res=>{
            if(res.data.statusCode==200){
                  this.userData=res.data.data;
            }
          })
          .catch(error=>{
              console.log(error)
          })
        }
      };
    },
    methods: {
        updateUser:function(){
          this.$axios
          .put('user',{
              'lName': this.ruleForm.lName,
              'rName': this.ruleForm.rName,
              'tel': this.ruleForm.tel,
              'email': this.ruleForm.email,
              'code':this.ruleForm.code,
              'status':this.ruleForm.status
          })
          .then(res=>{
            alert(res.data.statusCode);
            if(res.data.statusCode==200){
              let users=this.userData;
              for(var i=0;i<users.length;i++){
                if((users[i].lName).equals(this.ruleForm.lName)){
                    users[i].rName=this.ruleForm.rName;
                    users[i].tel=this.ruleForm.tel;
                    users[i].email=this.ruleForm.email;
                    users[i].code=this.ruleForm.code;
                    users[i].status=this.ruleForm.status;
                    break;
                }
              }
              this.textVisible=true;
            }
          })
          .catch(error=>{
              console.log(error);
          })         
        }
  }
}
</script>
<style scoped>
.demo-ruleForm{
   margin-left: 300px;
}
.row{
     margin-left: -300px;
}
</style>
